<template>

	<view class="mine animation-fade">
		<view class="logo flexlogo">
			<view>
				<avatar :bgImage="imgBg" selWidth="200px" selHeight="200px" ref='avatar' fileType='png' :avatarSrc="userInfo.ext_info.yesapi_avatar"
				 @upload="myUpload" quality="0.8" inner=true class="logo-img" @click="clk">
				</avatar>
			</view>
			<view class="logo-title" style="margin-top: 28rpx;">
				<text class="user-name">账号：{{userInfo.username}}</text>
				<view style="color: #fff;">昵称：{{userInfo.ext_info.yesapi_nickname}}</view>
			</view>
		</view>

		<view class="cu-list menu sm-border card-menu margin-top bar-shadown">
			<view class="cu-item arrow">
				<view class="content" @tap='toinfo'>
					<text class="cuIcon-roundadd text-grey"></text>
					<text class="text-grey">修改资料</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content" @tap='topass'>
					<text class="cuIcon-safe text-grey"></text>
					<text class="text-grey">修改密码</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="tomydiary">
				<view class="content">
					<text class="cuIcon-copy text-grey"></text>
					<text class="text-grey">我的日记</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="toabout">
				<view class="content">
					<text class="cuIcon-copy text-grey"></text>
					<text class="text-grey">关于</text>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="cu-item arrow" @tap="getVersionData">
				<view class="content">
					<text class="cuIcon-pick text-grey"></text>
					<text class="text-grey">检测更新</text>
				</view>
				<view class="action">
					v{{ version }}
				</view>

			</view>
			<!-- #endif -->
			<view class="cu-item">
				<view class="content">
					<button class="cu-btn round bg-red shadow" @tap="logoutnow">
						退出登录
					</button>
				</view>
			</view>


		</view>
		<!-- 退出登录 -->
		<view class="cu-modal" :class="loginOutShow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">退出登录</view>
					<view class="action" @tap="loginOutHide">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确定退出登录？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-black" @tap="loginOutHide">取消</button>
						<button class="cu-btn bg-red margin-left" @tap="logoutnow">确定</button>

					</view>
				</view>
			</view>
		</view>

		<!-- 检测版本 -->
		<view class="cu-modal" :class="versionShow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">有新版本更新</view>
					<view class="action" @tap="loginOutHide">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确定下载？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-black" @tap="loginOutHide">取消</button>
						<button class="cu-btn bg-red margin-left" @tap="isDownload">确定</button>

					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '../../js_sdk/gsq-image-tools/image-tools/index.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		components: {
			avatar
		},
		data() {
			return {
				isRotate: false, //是否加载旋转
				imgBg: "",
				versionShow: false, //新版本下载弹出
				version: "", //版本号
				vDownUrl: "", //最新版下载地址
				loginOutShow: false, //登录退出确认框
				userInfo: {
					ext_info: {
						yesapi_avatar: "",
						yesapi_email: "",
						yesapi_expiration_time: "",
						yesapi_mobile: "",
						yesapi_nickname: "",
						yesapi_points: 0,
						yesapi_real_name: "",
						yesapi_reg_note: "",
						yesapi_reg_source: "",
						yesapi_sex: ""
					},
					register_ip: "",
					register_time: "",
					role: "",
					rolename: "",
					status: 0,
					username: "",
					uuid: "",
					token: ""
				}

			}
		},
		mounted() {
			var _this = this
			var info = this.checkLogin("home", '2');
			if (info) {
				this.userInfo = info;
				if (info.ext_info.yesapi_avatar == '') {
					this.userInfo.ext_info.yesapi_avatar = '/static/avatar.jpg';
				}
				//#ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					_this.version = inf.version //赋值版本号
				});
				//#endif
			}

		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'setData'])
		},

		watch: {
			hasLogin: function(val) {
				if (!val) {
					this.checkLogin("my", '2')
				}

			}
		},



		methods: {
			...mapMutations(['logout', 'login']),
			async getVersionData() {
				//检查版本 用以升级
				uni.showLoading({
					title: '检测更新...'
				});

				var options = {
					data: {
						s: "App.Config.GetConfig",
						config_name: "lastversion",

					},
					method: "POST"
				}
				const res = await this.$myRuquest(options)
				if (res.data.data.err_code == 0) {
					console.log(JSON.parse(res.data.data.config_value))
					let resdata = JSON.parse(res.data.data.config_value);
					uni.hideLoading();
					if (this.version < resdata.version) {
						this.vDownUrl = resdata.url //赋值下载地址
						this.versionShow = true //弹窗
						uni.showToast({
							position: 'bottom',
							title: "有新版本"
						});
						uni.hideLoading();
					} else {
						uni.hideLoading();
						uni.showToast({
							position: 'bottom',
							title: "无新版本可更新！"
						});
					}




				} else {
					uni.showToast({
						icon: '',
						position: 'bottom',
						title: '查询失败'
					});
					uni.reLaunch({
						url: "/pages/index"
					});

				}

			},
			logoutnow() {
				if (this.loginOutShow) {
					this.logout()
					this.loginOutShow = false
				} else {
					this.loginOutShow = true
				}
			},
			loginOutHide() {
				//退出登录取消
				this.loginOutShow = false
				//版本下载取消
				this.versionShow = false
			},
			isDownload() {
				var _this = this
				_this.loginOutHide()
				//下载更新包 整包下载（浪费 不推荐）
				console.log(_this.vDownUrl)
				var wgtUrl = _this.vDownUrl;

				var downToak = plus.downloader.createDownload(wgtUrl, {
					filename: "_doc/update/"
				}, function(d, status) {
					if (status == 200) {
						console.log("下载App成功：" + d.filename);
						plus.nativeUI.showWaiting("安装中...");
						plus.runtime.install(d.filename, {}, function() {
							plus.nativeUI.closeWaiting();
							console.log("安装成功！");
							plus.nativeUI.alert("应用资源更新完成！", function() {
								plus.runtime.restart();
							});
						}, function(e) {
							plus.nativeUI.closeWaiting();
							console.log("安装失败[" + e.code + "]：" + e.message);
							plus.nativeUI.alert("安装失败[" + e.code + "]：" + e.message);
						});
					} else {
						console.log("下载App失败！");
						plus.nativeUI.alert("下载App失败！");
					}
					plus.nativeUI.closeWaiting();
				})
				downToak.start(); // 开启下载的任务
				var prg = 0;
				var showLoading = plus.nativeUI.showWaiting("正在下载,由于是国外服务器,时间较长请勿关闭..."); //创建一个showWaiting对象 
				downToak.addEventListener("statechanged", function(task, status) { //给下载任务设置一个监听 并根据状态  做操作
					switch (task.state) {
						case 1:
							showLoading.setTitle("正在下载");
							break;
						case 2:
							showLoading.setTitle("已连接到服务器");
							break;
						case 3:
							prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task.totalSize) * 100);
							if (prg % 1 == 0) { // 让百分比 增长
								showLoading.setTitle("　　 已下载" + prg + "%　　 ");
							}
							break;
						case 4:
							plus.nativeUI.closeWaiting();
							break;

					}

				});

			},


			clk() {
				let avatar = this.$refs.avatar;
				this.$store.commit("setData", {
					key: "tabshow",
					val: false
				});
				avatar.fChooseImg(1, {
					selWidth: "320upx",
					selHeight: "320upx",
					expWidth: "320px",
					expHeight: "320upx",
					inner: false
				}, {
					data: 'xxx'
				});
			},
			myUpload(rsp) {
				console.log(rsp.path)
				var path = plus.io.convertLocalFileSystemURL(rsp.path); //绝对路径	
				pathToBase64(path).then(base => {
					this.isRotate = true
					setTimeout(function() {
						this.isRotate = false
					}, 3000)
					uni.showLoading({
						title: '上传中'
					});
					this.imgUpload(base)
					//rsp.avatar.imgSrc = rsp.path;
					return;
				})
			},

			async imgUpload(file) {
				console.log(file)
				var options = {
					data: {
						s: "App.User.UploadAvatar",
						other_uuid: this.userInfo.uuid,
						file: file
					},
					method: "POST"
				}
				const res = await this.$myRuquest(options)
				console.log(res.data.data)
				if (res.data.data.err_code == 0) {
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '修改头像成功'
					});
					this.userInfo.ext_info.yesapi_avatar = res.data.data.yesapi_avatar
					this.login(this.userInfo)
				} else {
					console.log(res)
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '修改头像失败'
					});
				}


			},

			tomydiary() {
				uni.navigateTo({
					url: '/pages/calendar/calendar'
				});
			},
			toinfo() {
				uni.navigateTo({
					url: '/pages/my/info'
				});
			},
			toabout() {
				uni.navigateTo({
					url: '/pages/about/about'
				});
			},
			topass() {
				uni.navigateTo({
					url: '/pages/my/pass'
				});
			}



		}
	}
</script>

<style>
	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}

	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
	}

	.flexlogo {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 360upx;
		padding: 36upx;
		box-sizing: border-box;
		background: linear-gradient(135deg, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.7));
		flex-direction: row;
		align-items: center;

	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
		background: #000000;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.user-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>
